<template>
    <el-dialog :close-on-click-modal="false" :title="!dataForm.orderNumber ? '新增' : '查看'" :visible.sync="visible"
               width="80%">
        <el-form :model="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" ref="dataForm">
            <div class="main">
                <div class="content">
                    <div class="order-number">
                        <div class="num-cont">
                            <el-form-item label="订单编号:">
                                <span class="text">{{dataForm.orderNumber}}</span>
                            </el-form-item>
                            <el-form-item>
                                <el-steps :active="stepsStatus" :process-status="dataForm.status == 6 ? 'error':'wait'"
                                          align-center>
                                    <el-step :description="dataForm.orderTime" title="提交订单"></el-step>
                                    <el-step :description="dataForm.payTime" title="买家已付款"></el-step>
                                    <el-step :description="dataForm.dvyTime" title="卖家已发货"
                                             v-if="dataForm.orderType !== 1"></el-step>
                                    <el-step :description="dataForm.finallyTime" title="买家已收货"
                                             v-if="dataForm.orderType !== 1"></el-step>
                                </el-steps>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="order-state">
                        <div class="state-cont">
                            <div class="state-title">
                                <el-form-item label="订单状态:">
                                    <template slot-scope="scope">
                                        <el-tag size="small" type="warning" v-if="dataForm.status === 1">待付款</el-tag>
                                        <el-tag size="small" type="warning"
                                                v-if="dataForm.status === 2 && dataForm.orderType !== 1">待发货
                                        </el-tag>
                                        <el-tag size="small" type="warning"
                                                v-if="dataForm.status === 3 && dataForm.orderType !== 1">待收货
                                        </el-tag>
                                        <el-tag size="small" type="warning"
                                                v-if="dataForm.status === 4 && dataForm.orderType !== 1">待评价
                                        </el-tag>
                                        <el-tag size="small" type="success" v-if="dataForm.status === 5">成功</el-tag>
                                        <el-tag size="small" type="danger" v-if="dataForm.status === 6">失败</el-tag>
                                    </template>
                                </el-form-item>
                                <el-form-item>
                                    <el-row>
                                        <el-button @click="changeOrder(dataForm.orderNumber)"
                                                   plain type="primary"
                                                   v-if="dataForm.status === 2 && dataForm.orderType !== 1">发货
                                        </el-button>
                                        <!-- <el-button type="info" plain>打印</el-button> -->
                                    </el-row>
                                </el-form-item>
                            </div>
                            <div class="order-info">
                                <div class="order-details">
                                    <div class="detail-title">
                                        <img alt="" src="~@/assets/img/car.png">
                                        <span class="prompt">买家付款后才可以发货</span>
                                    </div>
                                    <div class="detail-cont">
                                        <div class="detail01">
                                            <img alt="" src="~@/assets/img/address.png">
                                            <div class="text-width">
                                                <!-- <span class="revise-addr" @click="changeAddr(dataForm.addrOrderId)">
                                                  <img src="~@/assets/img/revise.png" alt=""/>修改地址
                                                </span> -->
                                                <el-form-item label="收货人:">
                                                    <span>{{dataForm.userAddrOrder.receiver}}</span>
                                                </el-form-item>
                                                <el-form-item label="手机:">
                                                    <span>{{dataForm.userAddrOrder.mobile}}</span>
                                                </el-form-item>
                                                <el-form-item label="收货地址">
                                                    <span>{{dataForm.userAddrOrder.province}}{{dataForm.userAddrOrder.city}}{{dataForm.userAddrOrder.area}}{{dataForm.userAddrOrder.addr}}</span>
                                                </el-form-item>
                                            </div>
                                        </div>
                                        <div class="detail01">
                                            <img alt="" src="~@/assets/img/invoice.png">
                                            <span>不开发票</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="buyers">
                                    <div class="detail-title">
                                        <img alt="" src="~@/assets/img/buyer.png" style="margin-right:15px">
                                        <el-form-item label="买家:" label-width="44px" style="margin-top:22px">
                                            <span>{{dataForm.nickName}}</span>
                                        </el-form-item>
                                    </div>
                                    <div class="buyers-info">
                                        <div class="detail02">
                                            <img alt="" src="~@/assets/img/message.png">
                                            <div class="text-width">
                                                <span>买家备注:</span>
                                                <br>
                                                <span>{{dataForm.remarks}}</span>
                                            </div>
                                        </div>
                                        <!-- <div class="detail02">
                                          <img src="~@/assets/img/remarks.png" alt="" width="18">
                                          <div class="text-width">
                                            <span>卖家备注：</span><br>
                                            <span>给我加多点香菜</span>
                                          </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                            <div class="item-list">
                                <el-table :data="dataForm.orderItems" border>
                                    <el-table-column label="商品" prop="">
                                        <template slot-scope="scope">
                                            <div class="prod-con">
                                                <img :src="resourcesUrl + scope.row.pic" class="prod-img"/>
                                                <span>{{scope.row.prodName}}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="单价" prop="price" width="180">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.price}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="数量" prop="count" width="180">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.prodCount}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="总价" prop="totalPrice" width="180">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.productTotalAmount}}</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="item-info">
                                <el-form-item label="商品总价:">
                                    <span class="text">￥{{dataForm.total}}</span>
                                </el-form-item>
                                <!-- <el-form-item label="店铺优惠:">
                                <span class="text">￥15.00</span>
                                </el-form-item> -->
                                <!-- <el-form-item label="积分抵扣:">
                                <span class="text">￥15.00</span>
                                </el-form-item> -->
                                <!-- <el-form-item label="发票费用:">
                                <span class="text">￥15.00</span>
                                </el-form-item> -->
                                <el-form-item label="配送费用:" v-if="dataForm.freightAmount">
                                    <span class="text">￥{{dataForm.freightAmount}}</span>
                                </el-form-item>
                                <el-form-item label="应付金额:">
                                    <span class="text">￥{{dataForm.actualTotal}}</span>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div class="order-log">
                        <div class="log-title">
                            <span>订单日志</span>
                        </div>
                        <div class="log-cont">
                            <el-form-item label-width="10px" v-if="dataForm.orderTime">
                                <span>{{dataForm.orderTime}} {{dataForm.nickName}} 创建订单（成功）</span>
                            </el-form-item>
                            <el-form-item label-width="10px" v-if="dataForm.updateTime">
                                <span>{{dataForm.updateTime}} {{dataForm.nickName}} 订单更新（成功）</span>
                            </el-form-item>
                            <el-form-item label-width="10px" v-if="dataForm.payTime">
                                <span>{{dataForm.payTime}} {{dataForm.nickName}} 订单付款（成功）</span>
                            </el-form-item>
                            <el-form-item label-width="10px" v-if="dataForm.dvyTime">
                                <span>{{dataForm.dvyTime}} {{dataForm.nickName}} 订单发货（成功）</span>
                            </el-form-item>
                            <el-form-item label-width="10px" v-if="dataForm.finallyTime">
                                <span>{{dataForm.finallyTime}} {{dataForm.nickName}} 完成订单（成功）</span>
                            </el-form-item>
                            <el-form-item label-width="10px" v-if="dataForm.cancelTime">
                                <span>{{dataForm.cancelTime}} {{dataForm.nickName}} 取消订单（成功）</span>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </div>
        </el-form>
        <!-- 弹窗, 新增 / 修改 -->
        <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
        <devy-add @refreshDataList="getDataList" ref="devyAdd" v-if="devyVisible"></devy-add>
    </el-dialog>
</template>

<script>
    // import AddOrUpdate from './order-addr'
    import DevyAdd from './order-devy'

    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    orderId: 0,
                    orderNumber: '',
                    remarks: '',
                    total: 0,
                    actualTotal: 0,
                    dvyType: '',
                    status: 1,
                    addrOrderId: 0,
                    nickName: '',
                    orderItems: [],
                    orderTime: '',
                    updateTime: '',
                    payTime: '',
                    dvyTime: '',
                    finallyTime: '',
                    cancelTime: '',
                    userAddrOrder: {}
                },
                resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
                addOrUpdateVisible: false,
                devyVisible: false
            }
        },
        components: {
            // AddOrUpdate,
            DevyAdd
        },
        watch: {
            visible: function () {
                if (!this.visible) {
                    this.devyVisible = false
                    this.addOrUpdateVisible = false
                }
            }
        },
        computed: {
            stepsStatus: function () {
                if (this.dataForm.finallyTime) {
                    return 4
                }
                if (this.dataForm.dvyTime) {
                    return 3
                }
                if (this.dataForm.payTime) {
                    return 2
                }
                if (this.dataForm.orderTime) {
                    return 1
                }
            }
        },
        methods: {
            init(orderNumber) {
                this.dataForm.orderNumber = orderNumber || 0
                this.visible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                })
                if (this.dataForm.orderNumber) {
                    // 修改
                    this.$http({
                        url: this.$http.adornUrl(`/order/order/orderInfo/${this.dataForm.orderNumber}`),
                        method: 'get',
                        params: this.$http.adornParams()
                    }).then(({data}) => {
                        this.dataForm = data
                    })
                }
            },
            getDataList() {
                this.$http({
                    url: this.$http.adornUrl(`/order/order/orderInfo/${this.dataForm.orderNumber}`),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({data}) => {
                    this.dataForm = data
                })
            },
            // 表单提交
            dataFormSubmit() {
            },
            // 发货
            changeOrder(orderNumber) {
                this.devyVisible = true
                this.$nextTick(() => {
                    this.$refs.devyAdd.init(orderNumber, this.dataForm.dvyId, this.dataForm.dvyFlowId)
                })
            },
            // 修改备注
            changeRemarks() {
            },
            // 修改地址
            changeAddr(val) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(val)
                })
            }
        }
    }
</script>


<style>
    .main {
        height: 100%;
        width: 100%;
        font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
        "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        color: #495060;
    }

    .content {
        margin: 0 20px;
    }

    .content .steps {
        margin-top: 50px;
    }

    .order-number .number-text {
        font-weight: bold;
    }

    .order-number .text {
        font-size: 14px;
        color: #8a8a8a;
    }

    .order-state .state-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-left span {
        font-weight: bold;
    }

    .title-left .text {
        color: red;
    }

    .state-title .title-mid {
        display: flex;
        align-items: center;
    }

    .title-mid img {
        width: 18px;
        height: 18px;
    }

    .title-mid .mid-text {
        color: red;
    }

    .title-mid .text {
        color: #8a8a8a;
    }

    .content .order-state {
        position: relative;
        margin-top: 50px;
        border-bottom: 1px solid #e9eaec;
    }

    .order-state .order-info {
        width: 100%;
        border-top: 1px solid #e9eaec;
        margin: 50px 0;
        display: flex;
    }

    .order-info img {
        width: 18px !important;
        height: 18px !important;
        margin-right: 15px;
    }

    .order-info .detail-title {
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
    }

    .order-info .order-details {
        width: 50%;
        border-right: 1px solid #e9eaec;
    }

    .order-info .detail-cont {
        position: relative;
    }

    .detail-cont .detail01 {
        display: flex;
        height: 100%;
        line-height: 25px;
        margin-top: 15px;
    }

    .detail01 .text-width {
        width: 100%;
    }

    .detail02 .text-width {
        width: 100%;
    }

    .detail-cont .revise-addr {
        color: #4395ff;
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .order-info .detail-cont {
        border-top: 1px dashed #e9eaec;
        margin: 15px 20px 0 0;
    }

    .order-info .buyers {
        width: 50%;
        margin-left: 20px;
    }

    .buyers .buyers-info {
        border-top: 1px dashed #e9eaec;
        margin-top: 15px;
        position: relative;
    }

    .buyers .detail02 {
        display: flex;
        height: 100%;
        line-height: 25px;
        margin-top: 15px;
    }

    .buyers .revise-remarks {
        color: #4395ff;
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .order-state .item-info {
        padding-left: 80%;
        margin: 25px 0;
    }

    .item-info span {
        margin-bottom: 15px;
        line-height: 30px;
    }

    .item-info .text {
        position: absolute;
        right: 0;
    }

    .item-info .amount {
        font-size: 18px;
        color: red;
    }

    .order-log .log-title {
        height: 50px;
        width: 100%;
        line-height: 50px;
        font-weight: bold;
        /* border-bottom: 1px dashed #e9eaec; */
    }

    .order-log .log-cont {
        /* margin-top: 15px; */
        color: #4395ff;
    }

    .order-log .log-cont .el-form-item__content {
        line-height: 1.5em;
    }

    .item-list .prod-con {
        display: flex;
    }

    .item-list .prod-con .prod-img {
        width: 100px;
        height: 100px;
        margin-right: 8px;
    }
</style>



